<template>
  <!-- <div v-for="(s, i) in series" :key="i" class="bar">
      <div class="bar-name">{{ s.name | upper}}</div>
      <div class="bar-item">
        <div class="bar-item-inner" :style="sty(s)"></div>
      </div>
    </div> -->
  <component
    :is="currentComponent"
    :series="series"
    :maxValue="maxValue"
    :style="{ '--color': color }"
    :color="color"
    class="data-v-cus-bar"
  ></component>
</template>

<script>
import bar1 from "./bar1.vue";
import bar2 from "./bar2.vue";
import bar3 from "./bar3.vue";
import bar4 from "./bar4.vue";
import bar5 from './bar5.vue';
import bar6 from './bar6.vue';
export default {
  name: "data-v-cus-bar",
  props: {
    type: {
      type: [String, Number],
      default: 1
    },
    series: {
      type: Array,
      default: function() {
        return [];
      }
    },
    color: {
      type: String,
      default: "#fff"
    }
  },
  data() {
    return {};
  },
  components: {
    "cus-bar1": bar1,
    "cus-bar2": bar2,
    "cus-bar3": bar3,
    "cus-bar4": bar4,
    "cus-bar5": bar5,
    "cus-bar6": bar6,
  },
  computed: {
    currentComponent() {
      return "cus-bar" + this.type;
    },
    maxValue() {
      let max = Math.max(...this.series.map(s => s.value));
      let base = String(max).length;
      let value = 10 ** base;
      return value;
    }
  }
};
</script>
<style lang="less">
.data-v-cus-bar {
  width: 400px;
  display: inline-block;
  margin: 10px;
  font-size: 14px;
}
</style>
